<template>
  <ArmyPanelLayout class="myFramePanelLayout" title="温湿度对比图">
    <div class="barracksCenterThree--top">
      <div class="barracksCenterThree--top__left">
        <span  v-if="tableData.length && tabActive === '1'">
          单位：℃
        </span>
        <span  v-else-if="tableData.length && tabActive === '2'">
          单位：%
        </span>
        <span v-else>&nbsp;</span>
      </div>
      <div class="barracksCenterThree--top__right">
        <BtnGroupDevideTab class="BtnGroupDevideTabClass" :tabList="tabList" :tabActive="tabActive" @change="tabChangeAction"></BtnGroupDevideTab>
      </div>
    </div>
    <div class="barracksCenterThree-chart" :id="sid" v-if="tableData.length"></div>
    <div v-else class="empty" style="padding-top: 5%;">
      <DataEmptyTwo></DataEmptyTwo>
    </div>
  </ArmyPanelLayout>
</template>

<script>
import ArmyPanelLayout from '@/views/armyScreen/comp/ArmyPanelLayout.vue'
import {random14} from '@/util/utils.js'
import BtnGroupDevideTab from '@/views/armyScreen/comp/BtnGroupDevideTab.vue'
import echartsHandIcon from "@/assets/images/armyScreen/echartsHandIcon.png";
import * as echarts from 'echarts'
import {tempAndHumInfo} from '@/api/armyScreenApi.js'
import useCommonMethods from "@/mixin/useCommonMethods";
import DataEmptyTwo from "@/components/common/DataEmptyTwo.vue";
import $bus from "@/util/bus";

export default {
  inject: ['screenContext'],
  components: {
    DataEmptyTwo,
    BtnGroupDevideTab,
    ArmyPanelLayout
  },
  data() {
    return {
      sid: 'chart_' + random14(),
      tabList: [
        // {
        //   label: '温度',
        //   value: 1
        // },
        // {
        //   label: '湿度',
        //   value: 2
        // }
      ],
      tabActive: 1,
      tableData: []
    }
  },
  setup () {
    const {dictByTypeService} = useCommonMethods()
    return {
      dictByTypeService
    }
  },
  async mounted() {
    // 布撤防类型- defenseTyp
    const {data} = await this.dictByTypeService('tempAndHumType')
    const dictArr = data?.list || [
      // {
      //   "dictCode": "1",
      //   "dictValue": "温度",
      //   "sort": 1,
      //   "value": "1",
      //   "label": "温度"
      // },
      // {
      //   "dictCode": "2",
      //   "dictValue": "湿度",
      //   "sort": 2,
      //   "value": "2",
      //   "label": "湿度"
      // }
    ]
    dictArr.forEach(item => {
      item.value = item.dictCode
      item.label = item.dictValue
    })
    this.tabList = dictArr
    if (dictArr[0]) { // 需要从数据字典获取数据，如果没有类型，将无法展示
      this.tabActive = dictArr[0].dictCode
      this.tempAndHumInfoService()
    }
    $bus.on('reRequest', this.tempAndHumInfoService)
  },
  beforeUnmount() {
    $bus.off('reRequest', this.tempAndHumInfoService)
  },
  methods: {
    /**
     * tab change 触发的事件
     */
    tabChangeAction (value) {
      this.tabActive = value
      this.tempAndHumInfoService()
    },
    tempAndHumInfoService() {
      const paramObj = {
        valueType: this.tabActive
      }
      tempAndHumInfo(paramObj).then(res => {
        const tableData = res?.data?.list || [
          // {
          //   houseName: '1111',  // 仓库名称
          //   value: 12,  // 具体的值  xx℃ 或 xx%
          // },
          // {
          //   houseName: '222',  // 仓库名称
          //   value: 16,  // 具体的值  xx℃ 或 xx%
          // },
          // {
          //   houseName: '333',  // 仓库名称
          //   value: 11,  // 具体的值  xx℃ 或 xx%
          // },
        ]
        this.tableData = tableData
        if (tableData.length) {
          tableData.forEach(item => {
            item.name = item.houseName
          })
          this.$nextTick(() => {
            this.initChart(tableData)
          })
        }
      })
    },
    changeTab(tab) {
      this.tabActive = tab
      this.cameraOnOfflineBySchool()
    },
    initChart(tableData) {
      const that = this
      this.chart && this.chart.dispose()
      this.chart = echarts.init(document.getElementById(this.sid))
      let barData3d = tableData || [
        // 立体柱状图数据
        // { name: '水田', value: 260.67 },
        // { name: '水浇地', value: 231.13 },
        // { name: '旱地', value: 180.87 },
        // { name: '果园', value: 159.19 },
        // { name: '茶园', value: 148.75 },
        // { name: '橡胶园', value: 138.62 },
        // { name: '其他园地', value: 110.27 },
        // { name: '农村道路', value: 96.53 },
        // { name: '水库水面', value: 75.88 },
        // { name: '其他', value: 54.31 },
      ];
      var xData = [];
      var yData = [];
      let isShowYData = false
      barData3d.map((item) => {
        xData.push(item.name)
        yData.push(item.value)
        if (item.value !== 0) {
          isShowYData = true
        }
      })
      const option = {
        // backgroundColor:"black", // 背景色，不要
        //你的代码
        tooltip: {
          trigger: 'item',
          className: 'custom-tooltip-box', // 命名父级类名
          // backgroundColor: 'rgba(255,255,255,0)',
          formatter: function (params) {
            let result = ''
            if ((that.tabActive + '') === '1') { // 表示温度
              result = `
              <div style="background: rgba(0,0,0,0.7);border-radius: 4px;padding: 5px 8px;">
                <div style="font-size: 12px;  color: rgba(216,240,255,0.80);">${params.name}</div>
                <div>
                  <span style="font-size: 12px;  color: rgba(216,240,255,0.80);margin-right: 12px;">温度</span>
                  <span style="font-size: 16px;  color: #58B5FF;">${params.value}℃</span>
                </div>
              </div>
              `
            } else { // 表示湿度
              result = `
              <div style="background: rgba(0,0,0,0.7);border-radius: 4px;padding: 5px 8px;">
                <div style="font-size: 12px;  color: rgba(216,240,255,0.80);">${params.name}</div>
                <div>
                  <span style="font-size: 12px;  color: rgba(216,240,255,0.80);margin-right: 12px;">湿度</span>
                  <span style="font-size: 16px;  color: #58B5FF;">${params.value}%</span>
                </div>
              </div>
              `
            }
            return result
          }
        },
        animation: true, // 动画效果
        /* *
          x：直角坐标系内绘图网格与左侧距离，数值单位 px，支持百分比（字符串），如：50%
          x2：直角坐标系内绘图网格与右侧距离，数值单位 px，支持百分比（字符串），如：50%
          y：直角坐标系内绘图网格与顶部距离，数值单位 px，支持百分比（字符串），如：50%
          y2：直角坐标系内绘图网格与底部距离，数值单位 px，支持百分比（字符串），如：50%
        * */
        grid: {
          x: 35,//相当于距离左边效果:padding-left
          y: 25,//相当于距离上边效果:padding-top
          x2: 30, // bottom: '3%',
          y2: 55
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisTick: {
              alignWithLabel: true
            },
            nameTextStyle: {
              color: '#82b0ec'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#82b0ec'
              }
            },
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                let ret = '' // 拼接加\n返回的类目项
                var maxLength = 4 // 每项显示文字个数
                var valLength = value.length // X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
                if (rowN > 1) {
                  // 如果类目项的文字大于5,
                  for (let i = 0; i < rowN; i++) {
                    let temp = '' // 每次截取的字符串
                    var start = i * maxLength // 开始截取的位置
                    var end = start + maxLength // 结束截取的位置
                    // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = `${value.substring(start, end)}${i !== rowN - 1 ? '\n' : ''}`
                    ret = ret + temp // 凭借最终的字符串
                  }
                  return ret
                } else {
                  return value
                }
              },
              textStyle: {
                color: 'rgba(255, 255, 255, 0.9)',
                width: 24,
                height: 18,
                fontSize: 12,
                fontWeight: 400,
                lineHeight: 18
              },
              margin: 20
            }
          }
        ],
        dataZoom: [
          {
            show: yData.length > 6,
            // realtime: true,
            // start: 0,
            bottom: 0,
            height: 16, //  dataZoom整体高度， 组件高度
            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
            // end: 35,
            startValue: 0,
            endValue: 5,
            brushSelect: false, // 是否允许拖动滑块长度改变视图范围，不允许就是固定范围
            showDataShadow: false,
            fillerColor: 'rgba(25,138,229,0.40)', // 滑块颜色， 进度条的填充颜色
            borderColor: 'transparent',
            backgroundColor: 'rgba(176,215,255,0.12)', // 默认背景颜色
            handleIcon: "image://" + echartsHandIcon,
            // handleSize: "8",
            minValueSpan: 5, // 用于限制窗口大小的最小值（实际数值）。
            // brushStyle: {
            //   borderWidth: '1',
            // },
            // handleStyle: {
            //   // 两侧缩放手柄的样式配置。
            //   // borderColor: 'rgba(255,255,255,0.24)',
            //   borderWidth: '1',
            //   // shadowBlur: 1,
            //   // background: '#0992FF',
            //   // shadowColor: '#0992FF'
            // }

      //       width: 4px;
      //       height: 18px;
      //       background: #0992FF;
      // border: 1px solid rgba(255,255,255,0.24);


          },
          {
            zoomLock: true, // 这个开启之后只能通过鼠标左右拉动，不能滚动显示
            type: 'inside'
          }
        ],
        yAxis: [
          {
            // name: '万公顷', // y轴坐标的单位
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.6)',
              padding: [0, 35, 5, 0]
            },
            //   nameLocation: 'middle',
            show: true,
            type: 'value',
            axisLabel: {
              textStyle: {
                color: 'rgba(255, 255, 255, 0.9)'
              }
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.15)',
                type: 'solid' // y轴的分割线的样式， 可以是 虚线 dashed 、实现 solid
              }
            },
            axisLine: {
              // show: true
              show: false // 是否显示左边的 y 轴
            }
          }
        ],
        series: [
          {
            type: 'bar',
            // silent: true,
            barWidth: '12', // 柱状图的宽度
            barGap: '10%', // Make series be overlap
            barCateGoryGap: '10%',
            itemStyle: {
              normal: {
                barBorderRadius: [4, 4, 0, 0], // 用来设置顶部的圆角
                // 用来设置渐变色的效果
                color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                    offset: 0,
                    color: 'rgba(48, 177, 255,0.9)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(48, 177, 255,0.3)'
                  }
                ])
                // opacity: 0.5,
              }
            },
            data: yData
          }
        ]
      };
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.myFramePanelLayout {
  width: 880px;
  height: 100%;
}

.barracksCenterThree {
  width: 439px;
  height: 226px;

  &--top{
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    &__left{
      line-height: 25px;
      padding-left: 25px;
      font-family: HiraginoSansGB-W3;
      font-size: 14px;
      color: #BDD3E8;
      letter-spacing: 0;
      font-weight: 300;
    }
    &__right{
      padding-right: 25px;
      .BtnGroupDevideTabClass{
        margin-bottom: 0;
        margin-top: 0;
      }
    }
  }

  &-chart {
    margin-left: 21px;
    height: 180px;
  }
}
</style>

<style>
.custom-tooltip-box{
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

</style>